<template>
	<view>
		<view class="invite-tab">
			<scroll-view scroll-x="true" class="scroll tab-wrap">
				<view class="tab-itmes" :class="[tab_index == key ? 'tab-itmes-active' : '']"
					v-for="(tab,key) in invite_tab" :index="key" @click="switchTab(key)">
					{{tab.title}}({{tab.value}})
				</view>
			</scroll-view>
		</view>
		<mescroll-uni class="list-wrap" @getData="getListData" top="110" refs="mescroll" :size="10">
			<block slot="list">
				<view class="invite-list" v-if="invite_list.length > 0">
					<view class="invite-items" v-for="(itmes,index) in invite_list" :index="index" :key="'shop-' + index">
						<view class="record-head">
							<view class="invite-mobile">商家账号：{{itmes.username}}</view>
							<view class="edit" v-if="!itmes.apply_state || itmes.apply_state=='-1' || itmes.apply_state=='-2'"
							@click="toEdit(itmes.jumpurl)">
								<text class="iconfont iconbianji edit-icon"></text>
								<view class="edit-text">编辑</view>
							</view>
							<view class="edit" @click="toEdit(itmes.jumpurl)" v-else>
								<!-- <text class="iconfont iconbianji edit-icon"></text> -->
								<view class="edit-text">查看</view>
							</view>
						</view>
						<view class="invite-col-start">
							<view class="invite-left">认证类型：{{itmes.cert_type}}</view>
							<view class="invite-left">审核状态：{{itmes.state}}</view>
						</view>
						<view class="invite-col-start">
							<view class="invite-right">店铺名称：{{itmes.shop_name}}</view>
						</view>
						<view class="invite-col-start">
							<view class="invite-right">申请时间：{{itmes.date}}</view>
						</view>
					</view>
				</view>
				<ns-empty v-else text="暂无邀请记录" :isIndex="!1"></ns-empty>
			</block>
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab_index: 0,
				invite_tab: [{
					title: '全部',
					value: 0
				}, {
					title: '未提交',
					value: 0
				}, {
					title: '审核中',
					value: 0
				}, {
					title: '审核失败',
					value: 0
				}, {
					title: '审核成功',
					value: 0
				}],
				invite_list: []
			}
		},
		methods: {
			switchTab(index) {
				this.tab_index = index;
				this.invite_list = [];
				this.mescroll.resetUpScroll();
			},
			toEdit(url) {
				this.$util.redirectTo('/otherpages/webview/webview', {
					link: encodeURIComponent(url)
				});
			},
			getListData(mescroll) {
				let data = {
					page_size: mescroll.size,
					page: mescroll.num,
					apply_state: this.tab_index
				};
				this.mescroll = mescroll;
				this.$api.sendRequest({
					url: '/spread/api/spread/spreadShop',
					data: data,
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
							this.invite_tab[0]['value'] = res.data.nocommit+res.data.verify+res.data.fail+res.data.adopt;
							this.invite_tab[1]['value'] = res.data.nocommit;
							this.invite_tab[2]['value'] = res.data.verify;
							this.invite_tab[3]['value'] = res.data.fail;
							this.invite_tab[4]['value'] = res.data.adopt;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.invite_list = []; //如果是第一页需手动制空列表
						newArr.forEach(v => {
							v.is_off = 0;
						});

						this.invite_list = this.invite_list.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.invite-tab {
		width: 750upx;
		height: 90upx;
		background: #FFFFFF;
		font-size: 28upx;

		.tab-wrap {
			width: 100%;
			padding: 0 30upx;
			position: relative;
			overflow-x: scroll;
			white-space: nowrap;
			overflow: hidden;
		}

		.tab-itmes {
			position: relative;
			display: inline-block;
			height: 90upx;
			line-height: 90upx;
			color: #303133;
			margin-right: 40upx;
		}

		.tab-itmes-active {
			color: #FF6A00;
			border-bottom: 4upx solid #FF6A00;
		}
	}

	.record-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// padding: 30rpx 0;
		
		.edit {
			display: flex;
			justify-content: center;
			align-items: center;
		
			.edit-icon {
				margin-right: 12rpx;
				font-size: 32rpx;
				color: #303133;
				line-height: 46rpx;
			}
		
			.edit-text {
				font-size: 32rpx;
				color: #303133;
				line-height: 46rpx;
			}
		
			&.disable {
				.edit-icon {
					color: #D8D8D8;
				}
		
				.edit-text {
					color: #D8D8D8;
				}
			}
		}
		
	}
	
	.invite-items {
		width: 630upx;
		// height: 204upx;
		background: #FFFFFF;
		border-radius: 2upx;
		padding: 30upx;
		margin: 0 30upx 20upx 30upx;

		.invite-mobile {
			font-weight: 600;
			height: 40upx;
			font-size: 28upx;
			color: #303133;
			line-height: 40upx;
			margin-bottom: 12upx;
		}

		.invite-col-start {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 12upx;
			height: 34upx;
			font-size: 24upx;
			line-height: 34upx;

			.invite-left {
				width: 258upx;
				color: #909399;
			}

			.invite-right {
				color: #909399;
			}
		}

		.invite-col-between {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30upx 78upx 0;

			.shop_profit {
				width: 208upx;
				height: 52upx;
				line-height: 52upx;
				border-radius: 28upx;
				border: 1px solid #FF6A00;
				font-size: 24upx;
				color: #FF6A00;
				text-align: center;
			}

			.order_profit {
				width: 208upx;
				height: 56upx;
				line-height: 56upx;
				background: #FF6A00;
				border-radius: 28upx;
				font-size: 24upx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
</style>
